<template>
    <a-modal v-bind="getBindValue" :title="title" :width="width" :footer="footer" @close="handleCancel" @cancel="handleCancel" title-align="start">
        <slot></slot>
        <template #footer>
            <a-button @click="handleCancel" v-if="isCancel">{{ cancelText }}</a-button>
            <a-button type="primary" @click="emit('handleSubmit')" :disabled="disabled">{{ submitText }}</a-button>
        </template>
    </a-modal>
</template>
<script lang="ts" setup>
const props=defineProps({
    title: { type: String, default: () => { return '' } },
    width: { type: String, default: () => { return '600px' } },
    footer: { type: Boolean, default: () => { return true } },
    isCancel: { type: Boolean, default: () => { return true } },
    cancelText: { type: String, default: () => { return '取消' } },
    submitText: { type: String, default: () => { return '确定' } },
    disabled: { type: Boolean, default: () => { return false } },
    modalVisible: { type: Boolean, default: () => { return false } },
})
const modalVisible = ref(false);
const emit = defineEmits(['handleCancel', 'handleSubmit' ,'update:modalVisible']);
const handleOk = (e) => {
    e.stopPropagation()
}
const getBindValue=computed(()=>{

      return {
        visible: props.modalVisible,
      }
})
const handleCancel=()=>{
    emit('handleCancel');
    emit('update:modalVisible',false)
}
</script>
